<template>
  <div>
    <div class="avatar-wrapper">
      <el-avatar
        class="avatar-img"
        shape="circle"
        :size="150"
        fit="cover"
        :src="orderData.img"
      ></el-avatar>
      <p class="avatar-name">{{ orderData.name }}</p>
      <p>{{ orderData.sex }} {{ orderData.age }}岁</p>
    </div>
    <el-card>
      <div class="card-title" slot="header">{{ title }}</div>
      <p v-for="item of displayData" :key="item.label">
        <template v-if="item.label === '评分'">
          <ScoreRate :rate="item.value" />
        </template>
        <template v-else>
          <b>{{ item.label }}</b> : {{ format(item.value) }}
        </template>
      </p>
    </el-card>
  </div>
</template>

<script>
import ScoreRate from "@/components/ScoreRate";
import { format } from "@/utils/format";
export default {
  props: {
    lists: Array,
    title: String,
  },
  components: {
    ScoreRate,
  },
  computed: {
    orderData() {
      const id = Number(this.$route.query.id);
      return (
        this.lists
          .reduce((res, cur) => [...res, ...cur.options], [])
          .find((_) => _.id === id) || {}
      );
    },
    displayData() {
      const res = {};
      for (const [key, item] of Object.entries(this.orderData)) {
        if (item.label) {
          res[key] = item;
        }
      }
      return res;
    },
  },

  methods: {
    format(value) {
      return format(value);
    },
  },
};
</script>

<style scoped>
.avatar-wrapper {
  margin: 1em 0;
  text-align: center;
}
.avatar-name {
  font-size: 1.3em;
  font-weight: bold;
}
.card-title {
  font-size: 1.3em;
}
</style>
